<template>
  <div class="app-container">
    <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
      <el-tab-pane name="WAIT_DEAL">
        <span slot="label">
          <i class="el-icon-s-order"></i>&nbsp;待办箱
        </span>
      </el-tab-pane>
      <el-tab-pane name="ALREADY_DEAL">
        <span slot="label">
          <i class="el-icon-s-claim"></i>&nbsp;已办箱
        </span>
      </el-tab-pane>
    </el-tabs>

    <div class="filter-container">
      <el-form :inline="true" label-position="right" label-width="90px">
        <el-form-item label="业务编号">
          <el-input v-model="listQuery.number" placeholder="业务编号" />
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="listQuery.projectName" placeholder="项目名称" />
        </el-form-item>
        <el-form-item>
          <el-button @click="changePage(1)" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="filter-container" v-if="tabActiveName == 'WAIT_DEAL'">
      <el-button
        class="filter-item"
        type="primary"
        @click="btnShenqian('APPROVED')"
        :loading="isBtnLoading"
      >一键审签（同意）</el-button>
      <el-button
        class="filter-item"
        type="danger"
        @click="btnShenqian('REJECTED')"
        :loading="isBtnLoading"
      >一键审签（不同意）</el-button>
    </div>
    <div v-show="tabActiveName == 'WAIT_DEAL'">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="加载中"
        @selection-change="handleSelectionChange"
        highlight-current-row
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="projectNum" label="业务编号"></el-table-column>
        <el-table-column prop="districtName" label="所在区县"></el-table-column>
        <el-table-column prop="projectType" label="项目类型"></el-table-column>
        <el-table-column prop="projectLevelName" label="项目级别"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="status" label="状态">待审签</el-table-column>
        <el-table-column prop="lastSubmitTime" label="上一流程提交时间"></el-table-column>
        <el-table-column prop="submitter" label="提交人"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="tabActiveName == 'ALREADY_DEAL'">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="加载中"
        highlight-current-row
      >
        <el-table-column prop="projectNum" label="业务编号"></el-table-column>
        <el-table-column prop="districtName" label="所在区县"></el-table-column>
        <el-table-column prop="projectType" label="项目类型"></el-table-column>
        <el-table-column prop="projectLevelName" label="项目级别"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="status" label="状态">已审签</el-table-column>
        <el-table-column prop label="是否通过">
          <template slot-scope="scope">
            <span :class="scope.row.auditResult == 'REJECTED' ? 'redcolor' : ''">
              {{
              scope.row.auditResult == "REJECTED"
              ? "未通过"
              : scope.row.auditResult == "APPROVED"
              ? "通过"
              : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text">查看</el-button>
            <el-button type="text">审查意见表</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <el-table v-loading="listLoading" :data="list" element-loading-text="加载中" @selection-change="handleSelectionChange" highlight-current-row>
      <el-table-column v-if="tabActiveName == 'WAIT_DEAL'" type="selection" width="55"></el-table-column>
      <el-table-column prop="projectNum" label="业务编号"></el-table-column>
      <el-table-column prop="districtName" label="所在区县"></el-table-column>
      <el-table-column prop="projectType" label="项目类型"></el-table-column>
      <el-table-column prop="projectLevelName" label="项目级别"></el-table-column>
      <el-table-column prop="projectName" label="项目名称"></el-table-column>
      <el-table-column v-if="tabActiveName == 'WAIT_DEAL'" prop="status" label="状态">待审签</el-table-column>
      <el-table-column v-if="tabActiveName == 'ALREADY_DEAL'" prop="status" label="状态">已审签</el-table-column>
      <el-table-column v-if="tabActiveName == 'WAIT_DEAL'" prop="lastSubmitTime" label="上一流程提交时间"></el-table-column>
      <el-table-column v-if="tabActiveName == 'WAIT_DEAL'" prop="submitter" label="提交人"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text">查看</el-button>
        </template>
      </el-table-column>
    </el-table>-->

    <div class="pagination-container">
      <el-pagination
        @current-change="changePage"
        :page-size="listQuery.size"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { queryAllDistrict } from '@/api/project/xmkgh/xmspread'
import {
  getList1,
  getList2,
  getList3,
  getList4,
  centerLeaderOneClickApproval,
  officePeopleOneClickApproval,
  auditorOneClickApproval,
  bureauLeaderOneClickApproval
} from '@/api/project/xmkgh/buntchCheckCityCenter'
import store from '@/store'
import { getTime } from '@/api/getTime'

export default {
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        dealType: null,
        projectName: null,
        number: null
      },
      tabActiveName: 'WAIT_DEAL', ///WAIT_DEAL-待办，ALREADY_DEAL-已办
      districtData: [],
      // role: store.state.user.userInfo.role.extend,
      role: store.state.user.userInfo.roleList[0].code,
      selectIds: [], //选择要审签的id
      isBtnLoading: false
    }
  },
  created() {
    console.log(this.role, 'role')
    this.queryAllDistrict()
    this.fetchData()
  },
  methods: {
    btnShenqian(auditResult) {
      let fun = null
      //审签 /不审签
      if (auditResult == 'APPROVED' && this.selectIds.length == 0) {
        this.$message.error('请选择要审签的项目')
        return
      } else if (auditResult == 'REJECTED' && this.selectIds.length == 0) {
        this.$message.error('请选择不审签的项目')
        return
      }
      let obj = {
        projectIds: this.selectIds,
        auditResult: auditResult,
        auditDate: getTime()
        // checkCensorId:''
      }
      if (this.role == 'ROLE_SZXFGFZR') {
        fun = centerLeaderOneClickApproval
        this.isBtnLoading = true
        fun(obj)
          .then(res => {
            this.isBtnLoading = false
            if (res.code == 1000) {
              if (auditResult == 'APPROVED') {
                this.$message.success('一键审签成功')
              } else if (auditResult == 'REJECTED') {
                this.$message.success('成功')
              }
              this.fetchData()
            }
          })
          .catch(error => {
            this.isBtnLoading = false
          })
      } else if (this.role == 'ROLE_SZXYWCSFZR') {
        fun = officePeopleOneClickApproval
        this.isBtnLoading = true
        fun(obj)
          .then(res => {
            this.isBtnLoading = false
            if (res.code == 1000) {
              if (auditResult == 'APPROVED') {
                this.$message.success('一键审签成功')
              } else if (auditResult == 'REJECTED') {
                this.$message.success('成功')
              }
              this.fetchData()
            }
          })
          .catch(error => {
            this.isBtnLoading = false
          })
      } else if (this.role == 'ROLE_SJYWCSFZR') {
        fun = auditorOneClickApproval
        this.isBtnLoading = true
        fun(obj)
          .then(res => {
            this.isBtnLoading = false
            if (res.code == 1000) {
              if (auditResult == 'APPROVED') {
                this.$message.success('一键审签成功')
              } else if (auditResult == 'REJECTED') {
                this.$message.success('成功')
              }
              this.fetchData()
            }
          })
          .catch(error => {
            this.isBtnLoading = false
          })
      } else if (this.role == 'ROLE_SJFGFJZ') {
        fun = bureauLeaderOneClickApproval
        this.isBtnLoading = true
        fun(obj)
          .then(res => {
            this.isBtnLoading = false
            if (res.code == 1000) {
              if (auditResult == 'APPROVED') {
                this.$message.success('一键审签成功')
              } else if (auditResult == 'REJECTED') {
                this.$message.success('成功')
              }
              this.fetchData()
            }
          })
          .catch(error => {
            this.isBtnLoading = false
          })
      }
    },
    handleSelectionChange(val) {
      //选择要审签的项目id
      this.multipleSelection = val
      this.selectIds = []
      this.multipleSelection.forEach(item => {
        this.selectIds.push(item.projectId)
      })
    },
    fetchData() {
      let fun = null
      if (this.role == 'ROLE_SZXFGFZR') {
        fun = getList1
        this.listQuery.dealType = this.tabActiveName
        this.listLoading = true
        fun(this.listQuery).then(res => {
          this.listLoading = false
          this.list = res.data.rows
          this.total = res.data.total
        })
      } else if (this.role == 'ROLE_SZXYWCSFZR') {
        fun = getList2
        this.listQuery.dealType = this.tabActiveName
        this.listLoading = true
        fun(this.listQuery).then(res => {
          this.listLoading = false
          this.list = res.data.rows
          this.total = res.data.total
        })
      } else if (this.role == 'ROLE_SJYWCSFZR') {
        fun = getList3
        this.listQuery.dealType = this.tabActiveName
        this.listLoading = true
        fun(this.listQuery).then(res => {
          this.listLoading = false
          this.list = res.data.rows
          this.total = res.data.total
        })
      } else if (this.role == 'ROLE_SJFGFJZ') {
        fun = getList4
        this.listQuery.dealType = this.tabActiveName
        this.listLoading = true
        fun(this.listQuery).then(res => {
          this.listLoading = false
          this.list = res.data.rows
          this.total = res.data.total
        })
      }
    },
    changePage(page) {
      this.listQuery.page = page
      this.fetchData()
    },
    queryAllDistrict() {
      queryAllDistrict().then(res => {
        this.districtData = res.data
      })
    },
    handleTabClick() {
      console.log(this.tabActiveName)
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
  color: #999;
}
.redcolor {
  color: red;
}
</style>
